<template>
  <div>
    <el-container>
      <!-- 头部导航栏 -->
      <el-header style="display: flex; justify-content: space-between">
        <!-- logo -->
        <img class="logo" src="../assets/logo.png" alt="" />
        <!-- 标题 -->
        <p style="font-size: 20px">朗驰科技内部管理平台</p>
        <!-- 个人中心 -->
        <el-dropdown style="margin-right: 30px">
          <el-button type="primary">
            个人中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <!-- 左侧侧边栏 -->
        <el-aside width="200px">
          <el-menu
            router
            default-active="employeename"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">技术</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>人力</span>
              </template>
              <el-menu-item index="employeename">员工花名</el-menu-item>
              <el-menu-item
                index="/attendance"
                :route="{ path: '/attendance' }"
              >
                员工考勤
              </el-menu-item>
              <el-menu-item index="/salary" :route="{ path: '/salary' }"
                >员工工资</el-menu-item
              >
              <el-menu-item index="/employment" :route="{path:'/employment'}">员工入职名单</el-menu-item>
              <el-menu-item index="/worker" :route="{ path: '/worker' }" >员工转正名单</el-menu-item>
              <el-menu-item index="6">员工离职名单</el-menu-item>
              <el-menu-item index="7">培训员工名单</el-menu-item>
              <el-menu-item index="8">分析图表</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">后勤</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">企宣</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <!-- 右边内容部分 -->
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- 底部 -->
          <el-footer>山西朗驰科技公司</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.logo {
  height: 60px;
  margin-left: 30px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  //   line-height: 900px;
  height: 900px;
  span {
    font-size: 20px;
    font-weight: bold;
  }
  .el-menu-item {
    font-size: 20px;
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
  // text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>